<template>
  <div>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
            v-model="updTeamData.name"
            name="name"
            label="队伍名称"
            placeholder="队伍名称"
            :rules="[{ required: true, message: '请填写队伍名称' }]"
        />
        <van-field
            v-model="updTeamData.description"
            type="textarea"
            rows="4"
            autosize
            name="description"
            label="队伍描述"
            placeholder="队伍描述"
            :rules="[{ required: true, message: '请填写队伍描述' }]"
        />

        <van-field
            v-model="updTeamData.expireTime"
            is-link
            readonly
            name="datePicker"
            label="过期时间选择"
            placeholder="点击选择过期时间"
            @click="showPicker = true"
        />
        <van-popup v-model:show="showPicker" position="bottom">
          <van-date-picker @confirm="onConfirm" @cancel="showPicker = false" :min-date="new Date()"/>
        </van-popup>

        <van-field name="radio" label="队伍状态">
          <template #input>
            <van-radio-group v-model="updTeamData.status" direction="horizontal">
              <van-radio name="0">公开</van-radio>
              <van-radio name="1">私有</van-radio>
              <van-radio name="2">加密</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field v-if="updTeamData.status === '2'"
                   v-model="updTeamData.password"
                   type="password"
                   name="密码"
                   label="队伍密码"
                   placeholder="密码"
                   :rules="[{ required: true, message: '请填写队伍密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>


</template>
<script setup lang="ts">
import {onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios.ts";
import {useRouter} from "vue-router";
import {useRoute} from "vue-router";

const router = useRouter();
const route = useRoute();
const id = route.query.id;
//展示日期选择器
const showPicker = ref(false)
//用户填写表单数据
const updTeamData: TeamType = ref({})
onMounted(async () => {
  const res = await myAxios.get("/team/getTeamById", {
    params: {
      id: id
    }
  });
  console.log(id)
  if (res.code === 0) {
    updTeamData.value = res.data
  }
})
const onConfirm = ({selectedValues}) => {
  updTeamData.value.expireTime = selectedValues.join('-');
  showPicker.value = false;
};

const onSubmit = async () => {
  //将status从字符串转为数字
  const postDate = {
    ...updTeamData.value,
    status: Number(updTeamData.value.status)
  }
  //todo 参数校验
  const res = await myAxios.put('/team/update', postDate)
  if (res?.code === 0 && res.data) {
    console.log(res)
    router.push({
          path: '/team',
          replace: true
        }
    )
  }
}
</script>
<style scoped>

</style>